<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-emoji"></i> 自定义图标</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <h2>使用方法</h2>
            <p style="line-height: 50px;">
                直接通过设置类名为 el-icon-lx-iconName 来使用即可。例如：（共{{ iconList.length }}个图标）
            </p>
            <p class="example-p">
                <i class="el-icon-lx-redpacket_fill" style="font-size: 30px;color: #ff5900"></i>
                <span>&lt;i class=&quot;el-icon-lx-redpacket_fill&quot;&gt;&lt;/i&gt;</span>
            </p>
            <p class="example-p">
                <i class="el-icon-lx-weibo" style="font-size: 30px;color:#fd5656"></i>
                <span>&lt;i class=&quot;el-icon-lx-weibo&quot;&gt;&lt;/i&gt;</span>
            </p>
            <p class="example-p">
                <i class="el-icon-lx-emojifill" style="font-size: 30px;color: #ffc300"></i>
                <span>&lt;i class=&quot;el-icon-lx-emojifill&quot;&gt;&lt;/i&gt;</span>
            </p>
            <br>
            <h2>图标</h2>
            <div class="search-box">
                <el-input class="search" size="large" v-model="keyword" clearable placeholder="请输入图标名称"></el-input>
            </div>
            <ul>
                <li class="icon-li" v-for="(item,index) in list" :key="index">
                    <div class="icon-li-content">
                        <i :class="`el-icon-lx-${item}`"></i>
                        <span>{{ item }}</span>
                    </div>
                </li>
            </ul>
        </div>

    </div>
</template>

<script>
export default {
    data: function () {
        return {
            keyword: '',
            iconList: [
                'attentionforbid',
                'attentionforbidfill',
                'attention',
                'attentionfill',
                'tag',
                'tagfill',
                'people',
                'peoplefill',
                'notice',
                'noticefill',
                'mobile',
                'mobilefill',
                'voice',
                'voicefill',
                'unlock',
                'lock',
                'home',
                'homefill',
                'delete',
                'deletefill',
                'notification',
                'notificationfill',
                'notificationforbidfill',
                'like',
                'likefill',
                'comment',
                'commentfill',
                'camera',
                'camerafill',
                'warn',
                'warnfill',
                'time',
                'timefill',
                'location',
                'locationfill',
                'favor',
                'favorfill',
                'skin',
                'skinfill',
                'news',
                'newsfill',
                'record',
                'recordfill',
                'emoji',
                'emojifill',
                'message',
                'messagefill',
                'goods',
                'goodsfill',
                'crown',
                'crownfill',
                'move',
                'add',
                'hot',
                'hotfill',
                'service',
                'servicefill',
                'present',
                'presentfill',
                'pic',
                'picfill',
                'rank',
                'rankfill',
                'male',
                'female',
                'down',
                'top',
                'recharge',
                'rechargefill',
                'forward',
                'forwardfill',
                'info',
                'infofill',
                'redpacket',
                'redpacket_fill',
                'roundadd',
                'roundaddfill',
                'friendadd',
                'friendaddfill',
                'cart',
                'cartfill',
                'more',
                'moreandroid',
                'back',
                'right',
                'shop',
                'shopfill',
                'question',
                'questionfill',
                'roundclose',
                'roundclosefill',
                'roundcheck',
                'roundcheckfill',
                'global',
                'mail',
                'punch',
                'exit',
                'upload',
                'read',
                'file',
                'link',
                'full',
                'group',
                'friend',
                'profile',
                'addressbook',
                'calendar',
                'text',
                'copy',
                'share',
                'wifi',
                'vipcard',
                'weibo',
                'remind',
                'refresh',
                'filter',
                'settings',
                'scan',
                'qrcode',
                'cascades',
                'apps',
                'sort',
                'searchlist',
                'search',
                'edit'
            ]
        }
    },
    computed: {
        list() {
            return this.iconList.filter((item) => {
                return item.indexOf(this.keyword) !== -1;
            })
        }
    }
}
</script>

<style scoped>
.example-p {
    height: 45px;
    display: flex;
    align-items: center;
}

.search-box {
    text-align: center;
    margin-top: 10px;
}

.search {
    width: 300px;
}

ul, li {
    list-style: none;
}

.icon-li {
    display: inline-block;
    padding: 10px;
    width: 120px;
    height: 120px;
}

.icon-li-content {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.icon-li-content i {
    font-size: 36px;
    color: #606266;
}

.icon-li-content span {
    margin-top: 10px;
    color: #787878;
}
</style>